{% extends 'ApplicationBootstrapBundle::layout.html.twig' %}

{% block title %}Sticky Footer and Fixed Top Navbar Example for Bootstrap{% endblock %}

{% block layoutstyle %}
    <link href="{{ asset('bundles/applicationbootstrap/css/examples/navbar_fixed_sticky_footer.css') }}" rel="stylesheet" type="text/css" media="all" />
{% endblock %}

{% block stylesheets %}
    <link href="{{ asset('bundles/applicationbootstrap/css/file-upload/jquery-bootstrap/jquery.fileupload.css') }}" rel="stylesheet" type="text/css" media="all" />
    <link href="{{ asset('bundles/applicationbootstrap/css/file-upload/jquery-bootstrap/jquery.fileupload-ui.css') }}" rel="stylesheet" type="text/css" media="all" />
{% endblock %}

{% block javascripts %}

    <script src="{{ asset('bundles/applicationbootstrap/js/file-upload/jquery-bootstrap/angular.min.js') }}" type="text/javascript"></script>
    <!-- The jQuery UI widget factory, can be omitted if jQuery UI is already included -->
    <script src="{{ asset('bundles/applicationbootstrap/js/file-upload/jquery-bootstrap/vendor/jquery.ui.widget.js') }}" type="text/javascript"></script>
    
    <!-- The Load Image plugin is included for the preview images and image resizing functionality -->
    <script src="{{ asset('bundles/applicationbootstrap/js/file-upload/jquery-bootstrap/load-image.all.min.js') }}" type="text/javascript"></script>
    <!-- The Canvas to Blob plugin is included for image resizing functionality -->
    <script src="{{ asset('bundles/applicationbootstrap/js/file-upload/jquery-bootstrap/canvas-to-blob.min.js') }}" type="text/javascript"></script>
    
    <!-- The Iframe Transport is required for browsers without support for XHR file uploads -->
    <script src="{{ asset('bundles/applicationbootstrap/js/file-upload/jquery-bootstrap/jquery.iframe-transport.js') }}" type="text/javascript"></script>
    <!-- The basic File Upload plugin -->
    <script src="{{ asset('bundles/applicationbootstrap/js/file-upload/jquery-bootstrap/jquery.fileupload.js') }}" type="text/javascript"></script>

	<!-- The File Upload processing plugin -->
	<script src="{{ asset('bundles/applicationbootstrap/js/file-upload/jquery-bootstrap/jquery.fileupload-process.js') }}" type="text/javascript"></script>
	<!-- The File Upload image preview & resize plugin -->
	<script src="{{ asset('bundles/applicationbootstrap/js/file-upload/jquery-bootstrap/jquery.fileupload-image.js') }}" type="text/javascript"></script>
	<!-- The File Upload audio preview plugin -->
	<script src="{{ asset('bundles/applicationbootstrap/js/file-upload/jquery-bootstrap/jquery.fileupload-audio.js') }}" type="text/javascript"></script>
	<!-- The File Upload video preview plugin -->
	<script src="{{ asset('bundles/applicationbootstrap/js/file-upload/jquery-bootstrap/jquery.fileupload-video.js') }}" type="text/javascript"></script>
	<!-- The File Upload validation plugin -->
	<script src="{{ asset('bundles/applicationbootstrap/js/file-upload/jquery-bootstrap/jquery.fileupload-validate.js') }}" type="text/javascript"></script>
	<!-- The File Upload Angular JS module -->
	<script src="{{ asset('bundles/applicationbootstrap/js/file-upload/jquery-bootstrap/jquery.fileupload-angular.js') }}" type="text/javascript"></script>
	
	<script type="text/javascript">
	/*
	 * jQuery File Upload Plugin Angular JS Example 1.2.1
	 * https://github.com/blueimp/jQuery-File-Upload
	 *
	 * Copyright 2013, Sebastian Tschan
	 * https://blueimp.net
	 *
	 * Licensed under the MIT license:
	 * http://www.opensource.org/licenses/MIT
	 */

	/* jshint nomen:false */
	/* global window, angular */

	(function () {
	    'use strict';

	    var isOnGitHub = window.location.hostname === 'blueimp.github.io',
	        url = isOnGitHub ? '//jquery-file-upload.appspot.com/' : '{{ asset('bundles/applicationbootstrap/uploads/jquery-bootstrap/images/index.php') }}';

	    angular.module('demo', [
	        'blueimp.fileupload'
	    ])
	        .config([
	            '$httpProvider', 'fileUploadProvider',
	            function ($httpProvider, fileUploadProvider) {
	                delete $httpProvider.defaults.headers.common['X-Requested-With'];
	                fileUploadProvider.defaults.redirect = window.location.href.replace(
	                    /\/[^\/]*$/,
	                    '/cors/result.html?%s'
	                );
	                if (isOnGitHub) {
	                    // Demo settings:
	                    angular.extend(fileUploadProvider.defaults, {
	                        // Enable image resizing, except for Android and Opera,
	                        // which actually support image resizing, but fail to
	                        // send Blob objects via XHR requests:
	                        disableImageResize: /Android(?!.*Chrome)|Opera/
	                            .test(window.navigator.userAgent),
	                        maxFileSize: 5000000,
	                        acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i
	                    });
	                }
	            }
	        ])

	        .controller('DemoFileUploadController', [
	            '$scope', '$http', '$filter', '$window',
	            function ($scope, $http) {
	                $scope.options = {
	                    url: url
	                };
	                if (!isOnGitHub) {
	                    $scope.loadingFiles = true;
	                    $http.get(url)
	                        .then(
	                            function (response) {
	                                $scope.loadingFiles = false;
	                                $scope.queue = response.data.files || [];
	                            },
	                            function () {
	                                $scope.loadingFiles = false;
	                            }
	                        );
	                }
	            }
	        ])

	        .controller('FileDestroyController', [
	            '$scope', '$http',
	            function ($scope, $http) {
	                var file = $scope.file,
	                    state;
	                if (file.url) {
	                    file.$state = function () {
	                        return state;
	                    };
	                    file.$destroy = function () {
	                        state = 'pending';
	                        return $http({
	                            url: file.deleteUrl,
	                            method: file.deleteType
	                        }).then(
	                            function () {
	                                state = 'resolved';
	                                $scope.clear(file);
	                            },
	                            function () {
	                                state = 'rejected';
	                            }
	                        );
	                    };
	                } else if (!file.$cancel && !file._index) {
	                    file.$cancel = function () {
	                        $scope.clear(file);
	                    };
	                }
	            }
	        ]);

	}());

	</script>
{% endblock %}

{% block navigation %}
    <!-- Fixed navbar -->
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="container">
        
            {% include 'ApplicationBootstrapBundle::_navbar.html.twig' %}
        
        </div>
    </nav>
{% endblock %}

{% block body %}
    <div class="container">
        <div class="page-header">
          <h1>jQuery File Upload</h1>
        </div>
        <h2 class="lead">AngularJS version</h2>
        
        {% include 'ApplicationBootstrapBundle:FileUpload:_navTabsjQueryUiBootstrop.html.twig' %}
        <br/>
	    <blockquote>
	        <p>File Upload widget with multiple file selection, drag&amp;drop support, progress bars, validation and preview images, audio and video for AngularJS.<br>
	        Supports cross-domain, chunked and resumable file uploads and client-side image resizing.<br>
	        Works with any server-side platform (PHP, Python, Ruby on Rails, Java, Node.js, Go etc.) that supports standard HTML form file uploads.</p>
	    </blockquote>
	    
        <div class="row">
            <div class="col-md-12">
{% verbatim %}
			    <!-- The file upload form used as target for the file upload widget -->
			    <form id="fileupload" action="//jquery-file-upload.appspot.com/" method="POST" enctype="multipart/form-data" data-ng-app="demo" data-ng-controller="DemoFileUploadController" data-file-upload="options" data-ng-class="{'fileupload-processing': processing() || loadingFiles}">
			        <!-- Redirect browsers with JavaScript disabled to the origin page -->
			        <noscript><input type="hidden" name="redirect" value="https://blueimp.github.io/jQuery-File-Upload/"></noscript>
			        <!-- The fileupload-buttonbar contains buttons to add/delete files and start/cancel the upload -->
			        <div class="row fileupload-buttonbar">
			            <div class="col-lg-7">
			                <!-- The fileinput-button span is used to style the file input field as button -->
			                <span class="btn btn-success fileinput-button" ng-class="{disabled: disabled}">
			                    <i class="glyphicon glyphicon-plus"></i>
			                    <span>Add files...</span>
			                    <input type="file" name="files[]" multiple ng-disabled="disabled">
			                </span>
			                <button type="button" class="btn btn-primary start" data-ng-click="submit()">
			                    <i class="glyphicon glyphicon-upload"></i>
			                    <span>Start upload</span>
			                </button>
			                <button type="button" class="btn btn-warning cancel" data-ng-click="cancel()">
			                    <i class="glyphicon glyphicon-ban-circle"></i>
			                    <span>Cancel upload</span>
			                </button>
			                <!-- The global file processing state -->
			                <span class="fileupload-process"></span>
			            </div>
			            <!-- The global progress state -->
			            <div class="col-lg-5 fade" data-ng-class="{in: active()}">
			                <!-- The global progress bar -->
			                <div class="progress progress-striped active" data-file-upload-progress="progress()"><div class="progress-bar progress-bar-success" data-ng-style="{width: num + '%'}"></div></div>
			                <!-- The extended global progress state -->
			                <div class="progress-extended">&nbsp;</div>
			            </div>
			        </div>
			        <!-- The table listing the files available for upload/download -->
			        <table class="table table-striped files ng-cloak">
			            <tr data-ng-repeat="file in queue" data-ng-class="{'processing': file.$processing()}">
			                <td data-ng-switch data-on="!!file.thumbnailUrl">
			                    <div class="preview" data-ng-switch-when="true">
			                        <a data-ng-href="{{file.url}}" title="{{file.name}}" download="{{file.name}}" data-gallery><img data-ng-src="{{file.thumbnailUrl}}" alt=""></a>
			                    </div>
			                    <div class="preview" data-ng-switch-default data-file-upload-preview="file"></div>
			                </td>
			                <td>
			                    <p class="name" data-ng-switch data-on="!!file.url">
			                        <span data-ng-switch-when="true" data-ng-switch data-on="!!file.thumbnailUrl">
			                            <a data-ng-switch-when="true" data-ng-href="{{file.url}}" title="{{file.name}}" download="{{file.name}}" data-gallery>{{file.name}}</a>
			                            <a data-ng-switch-default data-ng-href="{{file.url}}" title="{{file.name}}" download="{{file.name}}">{{file.name}}</a>
			                        </span>
			                        <span data-ng-switch-default>{{file.name}}</span>
			                    </p>
			                    <strong data-ng-show="file.error" class="error text-danger">{{file.error}}</strong>
			                </td>
			                <td>
			                    <p class="size">{{file.size | formatFileSize}}</p>
			                    <div class="progress progress-striped active fade" data-ng-class="{pending: 'in'}[file.$state()]" data-file-upload-progress="file.$progress()"><div class="progress-bar progress-bar-success" data-ng-style="{width: num + '%'}"></div></div>
			                </td>
			                <td>
			                    <button type="button" class="btn btn-primary start" data-ng-click="file.$submit()" data-ng-hide="!file.$submit || options.autoUpload" data-ng-disabled="file.$state() == 'pending' || file.$state() == 'rejected'">
			                        <i class="glyphicon glyphicon-upload"></i>
			                        <span>Start</span>
			                    </button>
			                    <button type="button" class="btn btn-warning cancel" data-ng-click="file.$cancel()" data-ng-hide="!file.$cancel">
			                        <i class="glyphicon glyphicon-ban-circle"></i>
			                        <span>Cancel</span>
			                    </button>
			                    <button data-ng-controller="FileDestroyController" type="button" class="btn btn-danger destroy" data-ng-click="file.$destroy()" data-ng-hide="!file.$destroy">
			                        <i class="glyphicon glyphicon-trash"></i>
			                        <span>Delete</span>
			                    </button>
			                </td>
			            </tr>
			        </table>
			    </form>
{% endverbatim %}
            </div>
        </div>
        
    </div> <!-- /container -->
{% endblock %}